<template>
  <div class="layout" id="app">
    <Layout :style="{'minHeight':'100vh'}">
      <Sider
        ref="side1"
        hide-trigger
        collapsible
        :collapsed-width="78"
        v-model="isCollapsed"
        :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto', background:'#fff'}"
        class="sider"
      >
        <div class="logo"></div>
        <Menu
          ref="sidemenu"
          :open-names="openedFolderName"
          width="auto"
          :class="menuitemClasses"
          :active-name="openedMenuName"
        >
          <Submenu name="FireMonitor">
            <template slot="title">
              <Icon custom="iconfont icon-fire" size="18" />
              <span>火灾监测与预警</span>
            </template>
            <MenuItem name="SafeEvaluate">
              <router-link to="/fire-monitor/safe-evaluate" class="submenu-item">安全评估分析</router-link>
            </MenuItem>
            <MenuItem name="DangerLog">
              <router-link to="/fire-monitor/danger-log" class="submenu-item">隐患历史记录</router-link>
            </MenuItem>
          </Submenu>
          <Submenu name="CombatCommand">
            <template slot="title">
              <Icon size="18" custom="iconfont icon-command" />
              <span>警情情况记录</span>
            </template>
            <MenuItem name="HazardLog">
              <router-link to="/combat-command/hazard-log" class="submenu-item">查看警情记录</router-link>
            </MenuItem>
            <!-- <MenuItem name="EquipmentList">
              <router-link to="/combat-command/equipment-list" class="submenu-item">队站装备情况</router-link>
            </MenuItem>-->
          </Submenu>
          <Submenu name="Political">
            <template slot="title">
              <Icon size="18" custom="iconfont icon-party" />
              <span>党政建设分析</span>
            </template>

            <MenuItem name="Education">
              <router-link to="/political/education" class="submenu-item">政治教育情况</router-link>
            </MenuItem>
            <MenuItem name="News">
              <router-link to="/political/news" class="submenu-item">党政要闻情况</router-link>
            </MenuItem>
            <MenuItem name="Forum">
              <router-link to="/political/forum" class="submenu-item">论坛活跃情况</router-link>
            </MenuItem>
          </Submenu>
          <Submenu name="Eff">
            <template slot="title">
              <Icon size="18" custom="iconfont icon-efficiency" />
              <span>综合效能评估</span>
            </template>

            <MenuItem name="Personal">
              <router-link to="/eff/personal" class="submenu-item">效能评估报告</router-link>
            </MenuItem>
          </Submenu>
          <Submenu name="RiskControl">
            <template slot="title">
              <Icon size="18" custom="iconfont icon-risk" />
              <span>业务风险管控</span>
            </template>

            <MenuItem name="Abnormal">
              <router-link to="/risk-control/abnormal" class="submenu-item">异常性的风险</router-link>
            </MenuItem>
            <MenuItem name="Timeliness">
              <router-link to="/risk-control/timeliness" class="submenu-item">时效性风险</router-link>
            </MenuItem>
            <MenuItem name="Legal">
              <router-link to="/risk-control/legal" class="submenu-item">合规性风险</router-link>
            </MenuItem>
          </Submenu>
          <Submenu name="ProblemsLog">
            <template slot="title">
              <Icon size="18" custom="iconfont icon-question" />
              <span>问题台账管理</span>
            </template>

            <MenuItem name="Log">
              <router-link to="/problems-log/log" class="submenu-item">问题记录</router-link>
            </MenuItem>
          </Submenu>
          <Submenu name="DataStatics">
            <template slot="title">
              <Icon size="18" custom="iconfont icon-stat" />
              <span>数据统计分析</span>
            </template>

            <MenuItem name="ds_WholeScopeAnalysis">
              <router-link to="/data-statics/whole-scope-analysis" class="submenu-item">整体研判</router-link>
            </MenuItem>
            <MenuItem name="ds_DangerCorrectiveList">
              <router-link to="/data-statics/danger-corrective-list/" class="submenu-item">隐患整改清单</router-link>
            </MenuItem>
            <MenuItem name="ds_IllegalBehaviorAnalysis">
              <router-link to="/data-statics/illegal-behavior-analysis" class="submenu-item">违法行为分析</router-link>
            </MenuItem>
            <MenuItem name="ds_EmploymentStaffAnalysis">
              <router-link
                to="/data-statics/employment-staff-analysis"
                class="submenu-item"
              >消防单位从业人员</router-link>
            </MenuItem>
            <MenuItem name="ds_InstituteSafetyLevel">
              <router-link to="/data-statics/institute-safety-level" class="submenu-item">消防设施安全等级</router-link>
            </MenuItem>
            <MenuItem name="ds_MainbodyResponseAnalysis">
              <router-link
                to="/data-statics/mainbody-response-analysis"
                class="submenu-item"
              >消防主体责任落实</router-link>
            </MenuItem>
            <MenuItem name="ds_HighDangerousChemistry">
              <router-link to="/data-statics/high-dangerous-chemistry" class="submenu-item">易燃易爆化学品</router-link>
            </MenuItem>
            <MenuItem name="ds_StaffRespondJob">
              <router-link to="/data-statics/staff-respond-job" class="submenu-item">消防责任人履职情况</router-link>
            </MenuItem>
            <MenuItem name="ds_SIS">
              <router-link to="/data-statics/SIS" class="submenu-item">安全指标体系评估</router-link>
            </MenuItem>
            <MenuItem name="ds_CameraVideoAnalysis">
              <router-link to="/data-statics/camera-video-analysis" class="submenu-item">视频监控分析</router-link>
            </MenuItem>
            <MenuItem name="ds_BuildingFirealarmForecast">
              <router-link to="/data-statics/building-firealarm-forecast" class="submenu-item">建筑火灾预测</router-link>
            </MenuItem>
            <MenuItem name="ds_FireAttentionIndex">
              <router-link to="/data-statics/fire-attention-index" class="submenu-item">社会消防关注指数</router-link>
            </MenuItem>
            <MenuItem name="ds_FireRedblackRank">
              <router-link to="/data-statics/fire-redblack-rank" class="submenu-item">消防红黑榜</router-link>
            </MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout :style="{marginLeft:'200px'}">
        <Header
          :style="{position:'fixed',padding:0,width:'100%',zIndex:50}"
          class="layout-header-bar"
        >
          <Row type="flex" justify="start" class="code-row-bg" :gutter="12">
            <Col>
              <!-- <Icon
                @click.native="collapsedSider"
                :class="rotateIcon"
                :style="{margin: '0 10px 0 10px',color:'#fff',cursor:'pointer'}"
                type="md-menu"
                size="24"
              ></Icon>-->
            </Col>
            <Col>
              <Icon
                @click.native="refreshWhole"
                type="md-refresh"
                size="24"
                :style="{margin: '0 10px',color:'#fff',cursor:'pointer'}"
              ></Icon>
            </Col>
            <Col>
              <Icon
                @click.native="exitToEntrance"
                type="md-exit"
                size="24"
                :style="{margin: '0 10px',color:'#fff',cursor:'pointer'}"
              >退出</Icon>
            </Col>
            <Col span="16">
              <Breadcrumb class="breadcrumb-list">
                <BreadcrumbItem
                  :to="item.path"
                  v-for="(item,index) in pathList"
                  :key="'brd-'+index"
                  class="breadcrumb-item-text"
                >{{item.text}}</BreadcrumbItem>
              </Breadcrumb>
            </Col>
          </Row>
        </Header>
        <Content :style="{marginTop:'64px'}">
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      isCollapsed: false,
      openedMenuName: "SafeEvaluate",
      openedFolderName: ["FireMonitor"],
      currentLink: "/fire-monitor/safe-evaluate",
      pathList: [
        {
          path: "/",
          text: "首页"
        },
        {
          path: "/fire-monitor/safe-evaluate",
          text: "火灾监测与预警"
        }
      ]
    };
  },
  watch: {
    $route: {
      handler(route) {
        //debugger;

        //this.openedMenuName = route.name;
        this.setMenuState(route);
        this.buildCrumb();
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.buildCrumb();
    let route = this.$route.name;
    this.setMenuState(route);
  },
  mounted() {},
  computed: {
    rotateIcon() {
      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
    },
    menuitemClasses() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  methods: {
    collapsedSider() {
      this.$refs.side1.toggleCollapse();
    },
    setMenuState(route) {
      this.openedMenuName = route.name;
      this.$router.options.routes.forEach((o, i) => {
        if (route.name === o.name) {
          this.openedFolderName = [o.belongsTo];
        }
      });
      this.$nextTick(() => {
        this.$refs.sidemenu.updateOpened();
        this.$refs.sidemenu.updateActiveName();
      });
    },
    refreshWhole() {
      location.reload();
    },
    exitToEntrance() {
      location.href = "http://114.115.153.22:2222/login.html";
    },
    buildCrumb() {
      let routeName = this.$route.name;
      let crumbText = null;
      let path = null;
      this.$router.options.routes.forEach((o, i) => {
        if (this.$route.name === o.name) {
          crumbText = o.chnName;
          path = o.path;
        }
      });
      this.pathList = [
        {
          path: "/",
          text: "首页"
        },
        {
          path: path,
          text: crumbText
        }
      ];
    }
  }
};
</script>

<style scoped>
.logo {
  width: 100%;
  background: url(assets/df_logo.png) no-repeat;
  height: 60px;
  border-bottom: 1px #eaedf1 solid;
  margin-top: 5px;
  top:0;
}
.sider {
  box-shadow: 0 3px 7px #00000033;
  position: relative;
  overflow: scroll;
  height: calc(100vh - 60px);
  z-index: 3;
}
.sider::-webkit-scrollbar{
  width:5px;
  background: transparent;
  border-right:1px #fff solid;
}
.sider::-webkit-scrollbar-thumb{
  width:5px;
  border-radius: 5px;
  background: #00000010
}
.sider::-webkit-scrollbar-track{
  width:5px;
  border-radius: 5px;
  background: #00000015
}
.sider::-webkit-scrollbar-button{
  display: none;
}
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-header-bar {
  background: linear-gradient(90deg, #1d42ab, #2173dc, #1e93ff);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.layout-logo-left {
  width: 90%;
  height: 30px;
  border-radius: 3px;
  margin: 15px auto;
}
.menu-icon {
  transition: all 0.3s;
}
.rotate-icon {
  transform: rotate(-90deg);
}
.menu-item a {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
  color: #515a6e;
}
.menu-item .ivu-menu-item-active.ivu-menu-item a {
  color: #2d8cf0;
}
.submenu-item {
  padding-left: 12px;
}
.menu-item a:hover {
  color: #2173dc;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span,
.collapsed-menu a {
  width: 0px;
  transition: width 0.2s ease;
  display: none;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.ivu-menu-vertical.ivu-menu-light:after {
  width: 0px;
}
.breadcrumb-list {
  padding-left: 18px;
}
.breadcrumb-item-text a {
  color: #fff;
}
</style>

